<template>
  <div>
    <!-- 页头 -->
    <el-row :gutter="10">
      <el-col
        :span="2"
        style="position:absolute; padding-top:20px;padding-left:30px;">
        <el-button type="primary" plain icon="el-icon-arrow-left">返回</el-button>
      </el-col>
      <el-col :span="20" style="position:relative;left:150px;top:10px;">
        <div><h3>财务部员工档案</h3></div>
      </el-col>
    </el-row>
    <!-- 查询 -->
    <el-row>
      <el-col
        :span="10"
        :offset="1"
        style="margin-top:40px;margin-bottom:20px;">
        <el-form :inline="true" :model="query" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="query.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="query.position" placeholder="职务">
              <el-option
                v-for="(item, index) in positions"
                :key="index"
                :label="item"
                :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :offset="1" :span="20">
        <el-table
          :data="archivesList"
          border
          fit
          style="width: 100%; margin-top: 20px">
          <el-table-column prop="Id" label="员工ID" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="position" label="职务" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-link
                icon="el-icon-download"
                type="primary"
                :underline="false"
                style="padding:0 5px;"
                @click="download(scope.row)">下载</el-link>
              <el-link
                type="primary"
                :underline="false"
                @click="view(scope.row.Id)"
                style="padding:0 5px;">查看</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="query.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="margin-top:20px;float:right;">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPositions } from "@/api/manager";
import { getArchivesList } from "@/api/archives";
export default {
  data() {
    return {
      query: {
        name: "",
        position: "",
        currentPage: 1,
        limit: 4
      },
      positions: [],
      archivesList: [],
      total: 0
    };
  },
  mounted() {
    this.getPositions();
    this.getArchivesList();
  },
  methods: {
    async getPositions() {
      const res = await getPositions("1111");
      if (res.code == 200) {
        this.positions = res.data.positions;
      }
    },
    async getArchivesList() {
      const res = await getArchivesList("123", this.query);
      if (res.code === 200) {
        this.archivesList = res.data.archivesList;
        this.total = res.data.total;
      }
    },
    //下载
    download() {},
    //查看
    view(employeeId) {
      this.$router.push({
        name:'ArchiveDetails',
        params:{employeeId}
      })
    },
    handleSizeChange(limit) {
      this.query.limit = limit;
      this.getArchivesList();
    },
    handleCurrentChange(currentPage) {
      this.query.currentPage = currentPage;
      this.getArchivesList();
    }
  }
};
</script>
